// src/pages/consultPay/index.tsx
import Header from "@shared/header";
import styles from "@styles/consultPay.module.scss";
import {useTypedSelector} from "@store/index";
import {selectConsult} from "@store/slices/consultSlice";
import {
    useConsultPreDataQuery,
    useCreateConsultOrderMutation,
    usePayConsultOrderMutation
} from "@store/apiSlice/consultApiSlice";
import {useRequestPatientQuery} from "@store/apiSlice/patientApiSlice";
import {useState} from "react";
import {Toast} from "antd-mobile";
import {useNavigate} from "react-router-dom";
import { Popup, Dialog } from "antd-mobile";
export default function ConsultPay() {
    //获取本地的问诊信息
    const consult = useTypedSelector(selectConsult);
    //用于获取问诊订单预付款信息
    const { data: consultPreData } = useConsultPreDataQuery({
        type: consult.type!,
        illnessType: consult.illnessType!,
    });
    // 用于获取患者资料
    const { data: patientData } = useRequestPatientQuery(consult.patientId!);
    //用于存储用于是否同意协议的标识
    const [isAgree,setIsAgree] = useState(false)
    //用于创建问诊订单
    const [createOrder] = useCreateConsultOrderMutation()
    //用于保存订单id
    const [orderId,setOrderId] = useState<string | undefined>(undefined)
    // 用于控制支付方式的显示和隐藏
    const [visible, setVisible] = useState(false);
    // 获取页面跳转方法
    const navigate = useNavigate();
    //记录用户选择的支付方式
    const [payMethod, setPayMethod] = useState<0 | 1 | 2>(0);
    //用于获取支付地址
    const [payConsultOrder] = usePayConsultOrderMutation()
    return (
        <>
            <Header title="支付" />
            <div className={styles.page}>
                <div className={styles.top}>   图文问诊 {consultPreData?.data.payment}元</div>
                <div className={styles.doctor}>
                    <div className={styles.avatar}>
                        <img src="https://cp.itheima.net/assets/avatar-doctor.6cf240f4.svg" alt="" />
                    </div>
                    <div className={styles.title}>
                        <h4>极速问诊</h4>
                        <h5>自动分配医生</h5>
                    </div>
                </div>
                <ul className={styles.list}>
                    <li>
                        <span>优惠券</span>
                        <span>-¥{consultPreData?.data.couponDeduction}</span>
                    </li>
                    <li>
                        <span>积分抵扣</span>
                        <span>-¥{consultPreData?.data.pointDeduction}</span>
                    </li>
                    <li>
                        <span>实付款</span>
                        <span>
              <i>¥{consultPreData?.data.actualPayment}</i>
            </span>
                    </li>
                </ul>
                <div className={styles.divide}></div>
                <h6 className={styles.title}>患者资料</h6>
                <ul className={styles.list}>
                    <li>
                        <span>患者信息</span>
                        {patientData?.data.name} | {patientData?.data.genderValue} |{" "}
                        {patientData?.data.age}岁
                    </li>
                    <li className={styles.vertical}>
                        <span>病情描述</span>
                        <span>{consult.illnessDesc}</span>
                    </li>
                </ul>
                <div className={styles.agree}>
                    <input type="checkbox" id="agree"   checked={isAgree} onChange={(event) => setIsAgree(event.currentTarget.checked)}/>
                    <label htmlFor="agree">
            <span>
              我已同意<i>支付协议</i>
            </span>
                    </label>
                </div>
            </div>
            <div className={styles.summary}>
                <div className={styles.total}>
                    <i>合计</i>
                    <span>¥39.00</span>
                </div>
                <button className={styles.pay_button} onClick={()=>{
                    //判断是否同意支付协议
                    if(isAgree){
                        //创建订单
                        createOrder(consult)
                            .unwrap()
                            .then((response)=>{
                                // 显示支付弹框
                                setVisible(true);
                                //保存订单id
                                setOrderId(response.data.id)
                            })
                    }else {
                        Toast.show({content:"请同意支付协议"})
                    }
                }}>立即支付</button>
            </div>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    Dialog.confirm({
                        title: "关闭支付",
                        content: "取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？",
                        cancelText: "仍要关闭",
                        confirmText: "继续支付",
                        onCancel() {
                            setVisible(false);
                            // 跳转到问诊记录
                            navigate("/record/fast");
                        },
                    });
                }}
            >
            <div className={styles.pay_method}>
                <div className={styles.title}>选择支付方式</div>
                <div className={styles.price}>¥ 39</div>
                <ul className={styles.methods}>
                    <li>
                        <label htmlFor="wechat" className={styles.method}>
                            <img src={require("@icons/consult/wechat.svg").default} alt="" />
                            <span>微信支付</span>
                        </label>
                        <input type="radio" id="wechat"   name="payMethod"
                               checked={payMethod === 0}
                               onChange={(event) => {
                                   if (event.target.checked) {
                                       setPayMethod(0);
                                   }
                               }}/>
                    </li>
                    <li>
                        <label htmlFor="alipay" className={styles.method}>
                            <img src={require("@icons/consult/alipay.svg").default} alt="" />
                            <span>支付宝支付</span>
                        </label>
                        <input type="radio" id="alipay"  name="payMethod"
                               checked={payMethod === 1}
                               onChange={(event) => {
                                   if (event.target.checked) {
                                       setPayMethod(1);
                                   }
                               }}/>
                    </li>
                </ul>
                <button className={styles.pay_button} onClick={()=>{
                    //如果订单id存在
                    if(typeof orderId !== "undefined"){
                        //获取支付地址
                        payConsultOrder({
                            paymentMethod: payMethod,
                            orderId: orderId,
                            payCallback: "http://localhost:3000/room",
                        }) .unwrap()
                            .then((response) => {
                                // 跳转到真正的支付页面
                                window.location.href = response.data.payUrl;
                            });
                    }
                }}>立即支付</button>
            </div>
            </Popup>
        </>
    );
}